<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
    <div
        class="ma-content-block lg:flex justify-between p-4"
        style="background: #fff"
    >
        <!-- CRUD 组件 -->
        <ma-crud
            :options="crud"
            :columns="columns"
            ref="crudRef"
            @selection-change="selectionChange"
        >
            <!-- 表格按钮后置扩展 -->
            <template #tableAfterButtons>
                <a-button
                    v-auth="['setting:code:generate']"
                    type="outline"
                    @click="batchGenerate"
                    ><template #icon><icon-code /></template>生成代码</a-button
                >
                <a-button
                    v-auth="['setting:code:loadTable']"
                    @click="() => loadTableRef.open()"
                    type="outline"
                    status="success"
                    ><template #icon><icon-export /></template
                    >装载数据表</a-button
                >
            </template>
            <!-- 操作前置扩展 -->
            <template #operationBeforeExtend="{ record }">
                <a-link
                    @click="
                        autoForm(record.id, record.table_name, record.menu_name)
                    "
                    ><icon-link /> 测试</a-link
                >
                <a-link
                    v-auth="['setting:code:preview']"
                    @click="previewRef.open(record.id)"
                    ><icon-eye /> 预览</a-link
                >
                <a-popconfirm
                    content="同步会重置字段配置生成信息，确定同步吗?"
                    position="bottom"
                    @ok="sync(record.id)"
                >
                    <a-link v-auth="['setting:code:sync']"
                        ><icon-sync /> 同步</a-link
                    >
                </a-popconfirm>
                <a-link
                    v-auth="['setting:code:update']"
                    @click="() => editRef.open(record.id)"
                    ><icon-edit /> 编辑</a-link
                >
                <a-link
                    v-auth="['setting:code:generate']"
                    @click="generateCode(record.id)"
                    ><icon-code /> 生成代码</a-link
                >
            </template>
        </ma-crud>

        <load-table ref="loadTableRef" @success="selectSuccess" />

        <preview ref="previewRef" />

        <edit-info ref="editRef" @success="selectSuccess" />
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import generate from '@/api/setting/generate';
import { useRouter } from 'vue-router';
import { useTagStore } from '@/store/index.js';
import { Message } from '@arco-design/web-vue';
import tool from '@/utils/tool';

import LoadTable from './components/loadTable.vue';
import Preview from './components/preview.vue';
import EditInfo from './components/editInfo.vue';

const crudRef = ref();
const editRef = ref();
const previewRef = ref();
const loadTableRef = ref();
const selections = ref([]);
const tagStore = useTagStore();
const router = useRouter();

const types = [
    { label: '单表CRUD', value: 'single' },
    { label: '树表CRUD', value: 'tree' }
];

const autoForm = (id, table_name, menu_name) => {
    router.push('/autoform/' + id);
    tagStore.addTag({
        name: table_name + ' - test',
        title: menu_name + ' - 测试',
        path: '/autoform/' + id
    });
};

const selectSuccess = (result) => {
    result && crudRef.value.refresh();
};

const sync = async (id) => {
    const response = await generate.sync(id);
    response.success && Message.success(response.message);
};

const generateCode = async (ids) => {
    Message.info('代码生成下载中，请稍后');
    const response = await generate.generateCode({
        ids: ids.toString().split(',')
    });
    if (response.message && !response.success) {
        Message.error(response.message);
    } else {
        tool.download(response, 'MineAdmin.zip');
        Message.success('代码生成成功，开始下载');
    }
};

const batchGenerate = () => {
    if (selections.value.length === 0) {
        Message.error('至少要选择一条数据');
        return;
    }
    generateCode(selections.value.join(','));
};

const selectionChange = (row) => (selections.value = row);

const crud = reactive({
    api: generate.getPageList,
    showIndex: false,
    searchColNumber: 3,
    searchLabelWidth: '75px',
    pageLayout: 'fixed',
    rowSelection: { showCheckedAll: true },
    operationColumn: true,
    operationColumnWidth: 350,
    delete: {
        show: true,
        api: generate.deletes,
        auth: ['setting:code:delete']
    }
});

const columns = reactive([
    { title: '表名称', dataIndex: 'table_name', search: true, width: 200 },
    { title: '表描述', dataIndex: 'table_comment', width: 400 },
    {
        title: '生成类型',
        dataIndex: 'type',
        formType: 'select',
        width: 120,
        dict: { data: types, translation: true }
    },
    { title: '创建时间', dataIndex: 'created_at', width: 180 }
]);
</script>

<script>
export default { name: 'setting:code' };
</script>

<style scoped></style>
